<template lang="pug">
  van-dialog(v-model='showModal', title='领取红包', :show-cancel-button='true', @confirm='handleSave')
    .content
      p.red.mt20(style='padding-left: 10px; font-size: 14px') 提示：现金红包微信可直接提现
      .mt20
      van-field(
        ref="phone",
        required,
        clearable,
        label="手机号",
        placeholder="请输入手机号",
        v-model="phone",
        @blur="temporaryRepair",
        )
</template>
<script>
import modalMixin from '@/mixins/modal'
import { mapGetters } from 'vuex'
export default {
  name: 'welfareAppPhoneModal',
  mixins: [modalMixin],
  data() {
    return {
      data: null,
      phone: '',
      windowHeight: ''
    }
  },
  mounted() {
    this.windowHeight = window.innerHeight
    this.$vgo.on('welfare:phone', (data) => {
      this.openModal()
      this.data = data
    })
  },
  methods: {
    openModal() {
      this.phone = ''
      this.showModal = true
    },
    handleSave() {
      let mbRE = /^1[3|4|5|7|8][0-9]{1}\d{8}$/
      if (!this.phone) {
        this.$vgo.tip('号码未输入', 'fail')
      } else if (!mbRE.test(this.phone)) {
        this.$vgo.tip('号码输入有误', 'fail')
      } else {
        this.$store.dispatch('grabWelfare', { id: this.data, phone: this.phone })
      }
    },
    temporaryRepair() {
      let that = this
      let windowFocusHeight = window.innerHeight
      if (that.windowHeight == windowFocusHeight) {
        return
      }

      let currentPosition
      let speed = 1
      currentPosition = document.documentElement.scrollTop || document.body.scrollTop
      currentPosition -= speed
      window.scrollTo(0, currentPosition) // 页面向上滚动
      currentPosition += speed
      window.scrollTo(0, currentPosition) // 页面向下滚动
    },
  }
}
</script>
